import React, { useRef, useState, useEffect, useMemo } from'react';
import { Button, Icon } from 'element-react';
import AiChat from '@/components/ai-chat/index.jsx';
import { isAppIcon } from '@/utils/application';
import { hexToRgba } from '@/utils/theme';

const ChatPC = (props) => {
    const { application_profile, applicationAvailable } = props;
    const aiChatRef = useRef(null);
    const [loading, setLoading] = useState(false);
    const [leftLoading, setLeftLoading] = useState(false);
    const [isCollapse, setIsCollapse] = useState(false);
    const [chatLogData, setChatLogData] = useState([]);
    const [paginationConfig, setPaginationConfig] = useState({
        current_page: 1,
        page_size: 20,
        total: 0
    });
    const [currentRecordList, setCurrentRecordList] = useState([]);
    const [currentChatId, setCurrentChatId] = useState('new');
    const [currentChatName, setCurrentChatName] = useState('新建对话');
    const [mouseId, setMouseId] = useState('');

    const isDefaultTheme = useMemo(() => {
        return window.user.isDefaultTheme();
    }, []);

    const customStyle = useMemo(() => {
        return {
            background: application_profile?.custom_theme?.theme_color,
            color: application_profile?.custom_theme?.header_font_color
        };
    }, [application_profile]);

    const classObj = useMemo(() => {
        return {
            mobile: window.common.isMobile(),
            hideLeft:!isCollapse,
            openLeft: isCollapse
        };
    }, [isCollapse]);

    const newObj = {
        id: 'new',
        abstract: '新建对话'
    };

    const applicationDetail = useMemo(() => {
        return application_profile;
    }, [application_profile]);

    const handleScroll = (event) => {
        if (
            currentChatId!== 'new' &&
            event.scrollTop === 0 &&
            paginationConfig.total > currentRecordList.length
        ) {
            const history_height = event.dialogScrollbar.offsetHeight;
            setPaginationConfig((prevConfig) => ({
               ...prevConfig,
                current_page: prevConfig.current_page + 1
            }));
        }
    };

    const newChat = () => {
        if (!chatLogData.some((v) => v.id === 'new')) {
            setPaginationConfig({
                current_page: 1,
                page_size: 20,
                total: 0
            });
            setCurrentRecordList([]);
            setChatLogData((prevData) => [newObj,...prevData]);
        } else {
            setPaginationConfig({
                current_page: 1,
                page_size: 20,
                total: 0
            });
            setCurrentRecordList([]);
        }
        setCurrentChatId('new');
        setCurrentChatName('新建对话');
        if (window.common.isMobile()) {
            setIsCollapse(false);
        }
    };

    const clickListHandle = (item) => {
        if (item.id!== currentChatId) {
            setPaginationConfig({
                current_page: 1,
                page_size: 20,
                total: 0
            });
            setCurrentRecordList([]);
            setCurrentChatId(item.id);
            setCurrentChatName(item.abstract);
            if (currentChatId!== 'new') {
                // getChatRecord();
            }
        }
        if (window.common.isMobile()) {
            setIsCollapse(false);
        }
    };

    const init = () => {
        // 初始化历史对话记录
    };

    useEffect(() => {
        init();
    }, []);

    return (
        <div
            className={`chat-pc layout-bg ${classObj.mobile? 'mobile' : ''} ${classObj.hideLeft? 'hideLeft' : ''} ${classObj.openLeft? 'openLeft' : ''}`}
            style={{
                '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
                '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
            }}
        >
            <div className="chat-pc__header" style={customStyle}>
                <div className="flex align-center">
                    <div className="mr-12 ml-24 flex">
                        {isAppIcon(applicationDetail?.icon)? (
                            <div style={{ width: '32px', height: '32px', background: 'none' }}>
                                <img src={applicationDetail?.icon} alt="" />
                            </div>
                        ) : applicationDetail?.name? (
                            <div style={{ width: '32px', height: '32px', background: 'none' }}>
                                <img alt="" />
                            </div>
                        ) : null}
                    </div>
                    <h4>{applicationDetail?.name}</h4>
                </div>
            </div>
            <div>
                <div className="flex">
                    <div className="chat-pc__left border-r">
                        <div className="p-24 pb-0">
                            <Button className="add-button w-full primary" onClick={newChat}>
                                <Icon name="setting"></Icon>
                                <span className="ml-4">新建对话</span>
                            </Button>
                            <p className="mt-20 mb-8">历史记录</p>
                        </div>
                        <div className="left-height pt-0"></div>
                    </div>
                    <div className="chat-pc__right">
                        <div className="right-height chat-width">
                            <AiChat
                                ref={aiChatRef}
                                applicationDetails={applicationDetail}
                                available={applicationAvailable}
                                type="ai-chat"
                                appId={applicationDetail?.id}
                                record={currentRecordList}
                                chatId={currentChatId}
                                onRefresh={(chatId) => {
                                    // refresh 逻辑
                                }}
                                onScroll={handleScroll}
                            />
                        </div>
                    </div>
                </div>
                <div className="collapse">
                    <Button onClick={() => setIsCollapse(!isCollapse)}>
                        <Icon name="setting"></Icon>
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default ChatPC;